<template>
  <div class="project-list" style="margin: 15px">
    <el-card style="width: 100%;">
      <!-- 标题头 -->
      <div slot="header" style="padding-bottom: 10px">
        <span style="display: flex; align-items: center; font-size: 18px">
          <img
            src="@/assets/img/jlpz.png"
            style="height: 20px; width: 20px; margin-right: 5px"
          />
          奖励详情</span
        >
      </div>
      <!-- 项目内容 -->
      <div>
        <!-- 查询表单 -->
        <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
          <el-form :inline="true" label-position="right" label-width="110px">
            <el-form-item label="奖励模板名称">
              <el-input
                v-model="formData.field101"
                placeholder="请输入模版名称"
                :maxlength="30"
                clearable
                style="margin-right: 30px; width: 200px"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="奖励依据">
              <el-input
                v-model="formData.field102"
                placeholder="请输入奖励依据"
                :maxlength="30"
                clearable
                style="margin-right: 30px; width: 200px"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="奖励模式">
              <el-select
                v-model="formData.field102"
                filterable
                clearable
                placeholder="请选择奖励模"
                style="margin-right: 30px; width: 200px"
              >
                <el-option
                  v-for="(item, index) in field111Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="" style="margin-left: 110px">
              <el-button
                icon="el-icon-refresh"
                style="background: #eeeeee; color: #6396f4; font-weight: bold"
                @click="resetForm"
                >重置
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="getList(1)"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <el-divider v-if="userName != '用户'"></el-divider>


         <el-empty
            :image-size="200"
            description="暂无数据"
            v-show="roleList.length <= 0"
          ></el-empty>


        <!-- 卡片项目列表 -->
        <div class="kpBox">
          <div
            class="kp_mini_box"
            v-for="(item, index) in roleList"
            :key="index"
             @click="getDetailsButton(item)"
          >
            <div class="kp_mini_tiele_box">
              {{ item.reward_template_name }}
              <div
                :class="
                  item.pattern == 'TEAM'
                    ? 'kp_mini_tiele_img_box'
                    : 'kp_mini_tiele_img_box2'
                "
              >
                <span v-show="item.pattern == 'TEAM'">团队</span>
                <span v-show="item.pattern != 'TEAM'">个人</span>
              </div>
            </div>
            <div class="kp_mini_top_main_box">
              <div class="kp_mini_top_left_main_box">
                <img src="@/assets/img/jlbt123.png" alt="" />
                <span> {{ item.key_name }}</span>
              </div>
              <div>
                <span style="color: #666;">次数：</span>
                <span style="color: rgb(82, 139, 254)">{{
                  item.number || 0
                }}</span>
              </div>
            </div>
            <div class="kp_mini_bottom_box">
              剩余数量：
              <span style="color: rgb(81, 138, 253)">
                {{ item.current_quantity || 0 }}</span
              >
              <span style="margin-left: 5px; color:#b8b8b8"
                >/ {{ item.target_value || 0 }}</span
              >
            </div>
            <div class="kp_messageBox">
              <el-progress
                stroke-width="12"
                color="red"
                class="kp_messageBox_left"
                :show-text="false"
                :percentage="item.bfb"
              ></el-progress>
              <div class="kp_messageBox_rigth">
                <span style="color:#b8b8b8">完成</span>
                <span style="margin-left:5px;color:rgb(82, 139, 250)">{{item.bfb}}%</span>
              </div>
            </div>

            <div class="kp_time_bottom_Box">
              <span>  {{ item.reward_start_time}}</span>
              <span style="margin:0px 0px 0px 5px">—</span>
              <span>  {{ item.reward_end_time}}</span>
            </div>
          </div>
        </div>

         <!-- 分页器 -->
            <pagination
              style="margin: 0px 0px 50px 0px"
              :total="total"
              :page.sync="formData.pageNum"
              :limit.sync="formData.pageSize"
              @pagination="getList"
            />
      </div>
    </el-card>
    <!-- 公告弹窗 -->
    <Dialog
      ref="mychild"
      @AddAnnouncement="AddAnnouncement"
      :uelLocation="uelLocation"
    />
    <!-- 删除 -->
    <el-dialog title="" :visible.sync="deleteDialogVisible" width="30%" center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 奖励规则弹窗 -->
    <el-dialog title="奖励规则" :visible.sync="getDetails">
      <div style="height: 400px">
        <quill-editor
          ref="text"
          v-model="contentText"
          disabled
          class="myQuillEditor"
          :options="editorOption"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {
  listAPI,
  editindex,
  moreAPI,
  proUserList,
  Enableforbidden,
  selectRewardInfos,
  selectRewardInfoRecords,
  selectRewardTemplates,
  selectRewardTemplatesByUser,
  RewardRules,
} from "@/api/projectManagement/index.js";
import { getIdentityAndTopId } from "@/api/login.js";
import Dialog from "@/views/components/Dialog.vue";
export default {
  data() {
    return {
      contentText: "",
      editorOption: {
        modules: {
          syntax: {
            highlight: (text) => hljs.highlightAuto(text).value,
          },
          toolbar: [
            [], // toggled buttons
            [],

            [], // custom button values
            [],
            [], // superscript/subscript
            [], // outdent/indent
            [], // text direction

            [], // custom dropdown
            [],

            [], // dropdown with defaults from theme
            [],
            [],
            [], //去除video即可
          ],
        },
        placeholder: "...",
      },
      field111Options: [
        {
          label: "全部",
          value: undefined,
        },
        {
          label: "团队",
          value: "TEAM",
        },
        {
          label: "个人",
          value: "PERSONAL",
        },
      ],
      //查看详情弹窗
      getDetails: false,
      recordDataList: [],
      record: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      row: {
        id: "",
        userId: "",
      },
      deleteDialogVisible: false, //删除弹窗
      uelLocation: "",

      // 全的项目列表
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field104: undefined,
        field106: undefined,
        pageNum: 1,
        pageSize: 10,
      },

      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [
        {
          rewardTemplateName: "1",
          keyName: "22",
          pattern: "TEAM",
          targetValue: "2",
          currentQuantity: "2",
          number: "2",
          rewardStartTime: "2",
          bfb: "2",
        },
      ],

      userId: "",
      //租户还是用户
      userName: "",
    };
  },
  async created() {},
  async mounted() {
    this.userId = sessionStorage.getItem("userID") - 0;
    //获取是租户还是用户还是平台
    const { data } = await getIdentityAndTopId();
    //console.log(data, "用户信息平台还是租户");
    this.userName = data.identity;
    //公告弹窗
    if (data.identity == "用户") {
      this.AddAnnouncement();
    }
    this.getList();
  },
  methods: {
    async getList(row) {
      let param = {
        name: this.formData.field101, //奖励模板名称
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        pattern: this.formData.field102, //奖励模式 个人还是团队
      };
      const listData = await selectRewardTemplatesByUser(param);
      // //console.log(listData, "66777000++++++++++++");
      if (listData.code == 200) {
        if (listData.data == null) {
          this.roleList = [];
        } else {
          if (listData.data.list.length > 0) {
            let num = null;
            let num2 = null;
            listData.data.list.map((item) => {
              if (item.total_quantity != null || item.target_value != null) {
                num = item.total_quantity / item.target_value; //四舍五入取整
                num2 = num * 100; //四舍五入取整
                item.bfb = num2.toFixed(2) - 0; //四舍五入取整
              } else {
                item.bfb = 0;
              }
            });
            this.roleList = listData.data.list;
            this.total = listData.data.total;
          } else {
            this.roleList = [];
          }
        }
      } else {
        this.$message.error(listData.msg);
      }
     
      if (row) {
        this.$message({
          message: "搜索中...",
          type: "success",
        });
      }
    },
    //查看详情
    async getDetailsButton(row) {
      const data = await RewardRules(row.reward_template_id);
      //console.log(data, "999");
      if (data.code == 200) {
        this.contentText = data.data.ruleExplain;
      } else {
        this.$message.error(data.msg);
      }
      // let param = {
      // projectId: this.$route.query.projectId - 0, //项目ID
      //   rewardInfoId: row.id, //奖励信息ID
      //   rewardTemplateId: this.$route.query.id - 0, //奖励模板ID
      //   pageNum: this.record.pageNum,
      //   pageSize: this.record.pageSize,
      //   userId: row.userId,
      // };
      // const data = await selectRewardInfoRecords(param);
      // //console.log(data, "信息记录");
      // if (data.code == 200) {
      //   if (data.data.list.length > 0) {
      //     this.recordDataList = data.data.list;
      //     this.record.total = data.data.total;
      //   } else {
      //     this.recordDataList = [];
      //   }
      // } else {
      //   this.$message.error(data.msg);
      // }

      // this.row.id = row.id;
      // this.row.userId = row.userId;
      this.getDetails = true;
    },
    async recordList() {
      let param = {
        projectId: this.$route.query.projectId - 0, //项目ID
        rewardInfoId: this.row.id, //奖励信息ID
        rewardTemplateId: this.$route.query.id - 0, //奖励模板ID
        pageNum: this.record.pageNum,
        pageSize: this.record.pageSize,
        userId: this.row.userId,
      };
      const data = await selectRewardInfoRecords(param);
      //console.log(data, "信息记录");
      if (data.code == 200) {
        if (data.data.list.length > 0) {
          this.recordDataList = data.data.list;
          this.record.total = data.data.total;
        } else {
          this.recordDataList = [];
        }
      } else {
        this.$message.error(data.msg);
      }
    },
    //重置
    resetForm() {
      this.formData = {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field104: undefined,
        field106: undefined,
        pageNum: 1,
        pageSize: 10,
      };
      this.getList(1);
    },
    //奖励模板
    awardTemplate(row) {
      let config = row.cTime.filter((item) => item.configKey == "vipSummary");
      //console.log(config, "9999");

      this.$router.push({
        path: "ConfigurationAward",
        query: {
          proId: row.proId,
          judgeParam: row.typeId, //脱敏1汇总2
          configTypeId: config[0].id, //会员汇总的id
        },
      });
    },

    //公告弹窗
    AddAnnouncement() {
      //传递子组件当前的路由；然后调用子组件的事件函数
      this.uelLocation = window.location.pathname.slice(1);
      this.$refs.mychild.gitData();
    },

    //删除
    async delData(row) {
      // this.deleteDialogVisible=true;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let param = {
            delState: 1,
            proId: row.proId,
          };
          const data = await editindex(param);
          if (data.code == 200) {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功！",
            });
          } else {
            this.$message.error("操作失败！");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      //

      //
    },

    // 数据按钮
    dataBotton(row) {
      //console.log(row, "数据");
      // if (this.userName == "租户") {
      //   //console.log(row, "数据");
      //   this.$router.push({
      //     path: "tenantData",
      //     query: {
      //       proId: row.proId,
      //     },
      //   });
      // } else if (this.userName == "用户") {
      //   this.$router.push("userData");
      // }

      this.$router.push({
        path: "tenantData",
        query: {
          proId: row.proId,
          judgeParam: row.typeId,
        },
      });
    },

    handleAdd() {
      this.$router.push("addItem1");
    },
  },
  components: { Dialog, quillEditor },
};
</script>
<style scoped lang="scss">
.kpBox {
  // border: 1px red solid;
  padding: 20px 0px;
  border-top: 1px #eee solid;
  height: auto;
  display: flex;
  .kp_mini_box {
    cursor:pointer;  
    height: 250px;
    width: 380px;
    margin-right: 1.5%;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgb(233, 233, 233);
    padding: 35px 20px;
    .kp_mini_tiele_box {
      // border: 1px red solid;
      display: flex;
      align-items: center;
      font-size: 19px;
      font-weight: 550;
      .kp_mini_tiele_img_box {
        // border: 1px red solid;
        padding-left:5px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(../../assets/img/tdbtl.png) no-repeat center;
        margin-left: 10px;
         background-size: 50px 100%;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
      }
      .kp_mini_tiele_img_box2 {
        // border: 1px red solid;
        padding-left:5px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(../../assets/img/grbth.png) no-repeat center;
        margin-left: 10px;
        background-size: 50px 100%;
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;
      }
    }
    .kp_mini_top_main_box {
      // border: 1px red solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0px;
      border-bottom: 1px #eee solid;
      .kp_mini_top_left_main_box {
        color: #666;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        img {
          height: 20px;
          margin-right: 5px;
        }
      }
    }
    .kp_mini_bottom_box {
        color: #666;
      // border: 1px red solid;
      margin: 15px 0px;
    }
    .kp_messageBox {
      // border: 1px red solid;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .kp_messageBox_left {
        // border: 1px red solid;
        width: 75%;
      }
      .kp_messageBox_rigth {
        // border: 1px red solid;
        width: 25%;
        display: flex;
        justify-content:flex-end;
        font-size: 14px;
        align-items: center;
      }
    }
    .kp_time_bottom_Box{
        color: #666;
      // border: 1px red solid;
      margin-top: 15px;
      
    }
  }
}
//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.myQuillEditor {
  height: 350px;
}

::v-deep .el-progress {
  // border: 1px red solid;
  display: flex;
  align-items: center;
}
.project-button div:not(:last-child) {
  margin-right: 10px;
  margin-top: 20px;
}
/* 用户状态下的卡片 */
.EnterBox {
  
  color: #ffffff;
  font-size: 12px;
  text-align: right;
  height: 90%;
  width: 60px;
  font-weight: 400;
  border-radius: 10px;
  background: rgb(24, 144, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}



.xhxBox {
  border-top: 1px #eee solid;
  height: 5px;
}
</style>
<style>
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}
.project-list .el-date-editor .el-range-separator {
  width: 15%;
}

.project-list .el-form-item--medium .el-form-item__content {
  width: 200px;
}

.project-list .status-switch {
  line-height: 1;
  font-size: 14px;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  margin-left: 5px;
}

.project-list .project-button img {
  margin-right: 3px;
}

.project-list .project-button img:last-child {
  margin-left: 3px;
}

.project-list {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-top: 20px;
}

.project-list .el-dropdown-menu__item {
  font-size: 14px;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #f5f5f5 !important;
  color: #5c8af6 !important;
}

.project-list .el-divider--horizontal {
  background: #f0f0f0;
}

.project-list .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
  border-bottom: 1px #eee solid;
}

/*.project-list .el-card__body {*/
/*  padding: 0;*/
/*}*/
</style>
